<template>
  <xn-dialog :visible.sync="dialogVisible" :title="title" custom-class="upload-data-dialog" @close="onClose">
    <div class="content">
      <div class="steps">
        <el-steps :active="stepActive" finish-status="success" simple>
          <el-step title="上传文件" icon="el-icon-upload"></el-step>
          <el-step title="提取数据" icon="el-icon-s-order"></el-step>
        </el-steps>
      </div>
      <div class="btn-row">
        <el-upload
          class="upload-btn"
          action="#"
          ref="uploader"
          :show-file-list="false"
          :http-request="uploadFile"
          :limit="1"
          :accept="accept"
          :file-list="fileList"
          :disabled="stepActive !== 0"
          @change="onFileChange">
          <el-button type="primary">上传文件</el-button>
          <div slot="tip" class="template-tips">
            <div class="tips">只可以上传 {{ accept }} 文件</div>
            <div
              v-if="importFields && importFileTitle"
              class="tips download-tpl-btn"
              title="请按模板文件格式上传数据！"
              @click="downloadTemplateFile">
              <i class="el-icon-download"></i>
              模板文件下载
            </div>
          </div>
        </el-upload>
        <div class="tips">请按照模板文件填写数据</div>
        <div class="tips">每次仅可上传一份，不支持多份提取</div>
        <div class="tips">上传后系统将自动提取数据</div>
      </div>
    </div>
  </xn-dialog>
</template>

<script>
import XnDialog from '@com/xnDialog.vue'
import { exportExcelByTable } from '@libs/xlsx'
import { getFileTypeByName } from '@utility/utility'

export default {
  name: 'UploadDataDialog',
  components: {
    XnDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '导入数据',
    },
    accept: {
      type: String,
      default: '.xlsx,.xls',
    },
    importFields: {
      type: Object,
    },
    importFileTitle: {
      type: String,
      default: '导入模板',
    },
  },
  data() {
    return {
      dialogVisible: false,
      stepActive: 0,
      fileList: [],
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      this.stepActive = 0
      this.fileList = []
    },
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    onFileChange() {
      this.stepActive = 0
    },
    uploadFile(options) {
      console.log('options....', options)
      if (options.file) {
        // 校验文件格式
        let invalid = false

        if (!this.accept.includes(getFileTypeByName(options.file.name))) {
          invalid = true
        }
        if (invalid) {
          this.$message.warning('请选择指定的文件类型！')
          options.onError()
          return
        }
        this.$emit('file-upload', options)
      }
    },
    downloadTemplateFile() {
      exportExcelByTable(this.importFields, null, this.importFileTitle)
    },
  },
}
</script>

<style lang="scss" scoped>
.upload-data-dialog {
  ::v-deep &.el-dialog {
    width: 500px;
    .content {
      .steps {
        margin: 10px 0;
      }
      .btn-row {
        display: inline-block;
        padding: 20px;
        width: 100%;
        vertical-align: top;
        text-align: center;
        .upload-btn {
          // margin: 0 auto;
          // margin-bottom: 10px;
          .el-button {
            width: 140px;
          }
          .template-tips {
            margin-top: 16px;
            margin-bottom: 20px;
            .download-tpl-btn {
              cursor: pointer;
              color: #2b78f1;
              &:hover {
                color: #915f23;
              }
            }
          }
        }

        .tips {
          font-size: 14px;
          margin-top: 10px;
        }
      }
      .tips-item {
        padding: 5px 10px;
        font-size: 14px;
        line-height: 24px;
      }
    }
  }
}
</style>
